<template>
  <div class="app">
    <loginHeader ref="header" @tabClick="tabClick" @tabTwoClick="tabTwoClick" @tabThreeClick="tabThreeClick" @tabFourClick="tebFourClick"></loginHeader>
    <transition name="el-fade-in-linear">
      <component :is="componentName" :indexBottom="indexBottom" :productindex="productindex"></component>
    </transition>
    <portalBottom @courseClick="courseClick" @downloadClick="downloadClick" @productClick="productClick"></portalBottom>
  </div>

</template>

<script>
  import caseProduct from '@/views/portal/components/caseProduct'
  import product from '@/views/portal/components/product'
  import portalBottom from './components/bottom'
  import loginHeader from './components/header'
  import cooperation from './components/cooperation'
  import recruit from '@/views/portal/components/recruit'
  import contact from './components/contact'
  import loginIndex from './components/index'
  import loginMedia from './components/media'
  import loginIntroduction from './components/introduction'
  import loginMakePrice from './components/makePrice'
  import introduction from '@/views/portal/components/introduction'
  import downloadCenter from '@/views/portal/components/downloadCenter'
  import course from '@/views/portal/components/course'

  import utils from '../../utils/utils.js'
  export default {
    name: 'index',
    data(){
      return{
        componentName: 'loginIndex',
        indexBottom:'2-1',
        productindex:'1'
      }
    },
    components: {loginHeader,loginIndex,loginMedia,loginIntroduction,portalBottom,cooperation,contact,recruit,loginMakePrice,product,introduction,caseProduct,downloadCenter,course},
    mounted() {
      var _this = this
      if (!utils.isNull(_this.$route.query.tabContent)){
        console.log('首页参数')
        console.log(_this.$route.query.tabContent)
        _this.tabClick(_this.$route.query.tabContent)
        _this.$refs.header.headerBottom(_this.$route.query.tabContent)
      }
    },
    created() {

    },

    methods:{
      tabClick(data){
        console.log(data)
        if (data == 'index'){
          this.componentName = 'loginIndex'
        } else if (data == 'product') {
          this.componentName = 'product'
        } else if (data == 'pricing') {
          this.componentName = 'loginMakePrice'
        } else if (data == 'case') {
          this.componentName='caseProduct'
        } else if (data == 'cooperation') {
          this.componentName = 'cooperation'
        } else if (data == 'introduction'){
          this.componentName = 'loginIntroduction'
        } else if (data == 'recruit'){
          this.componentName = 'recruit'
        } else if (data == 'contact'){
          this.componentName = 'contact'
        }else if (data == 'media'){
          this.componentName = 'loginMedia'
        }else if (data=='downloadCenter'){
          this.componentName = 'downloadCenter'
        }else if (data=='course'){
          this.componentName = 'course'
        }
      } ,
      //教程
      courseClick(data,index){
        this.indexBottom = index
        this.tabClick(data)
        this.tabHeightClick(data)
      },
      tabHeightClick(data){
        var _this = this
        _this.$refs.header.headerBottom(data)
      },
      tabTwoClick(data){
        this.componentName = data
      },
      //下载中心
      downloadClick(data){
        this.tabClick(data)
        this.tabDownClick(data)
      },
      tabDownClick(data) {
        this.$refs.header.headerBottom(data)
      },
      tabThreeClick(data){
        this.componentName = data
      },
      //产品与服务
      productClick(data,index){
        this.tabClick(data)
        this.productindex=index
        this.tabProductClick(data)
      },
      tabProductClick(data){
        this.$refs.header.headerBottom(data)
      },
      tebFourClick(data){
        this.componentName = data
      }
    }

  }
</script>

<style scoped>
  .app{
    overflow: auto;
  }
</style>
